<template>
  <div class="h-full w-full">
    <!-- <div class="bg-purple-500 p-3">home</div> -->
    <p v-if="false">
      {{ userInfo }}
    </p>

    <div class="h-16 w-full px-4 py-2">
      <el-input v-model="inputValue"></el-input>
      <el-select
        v-model="selectValue"
        placeholder="Select"
        size="default"
        style="width: 240px"
      >
        <el-option
          v-for="item in selectOptions"
          :key="item.name"
          :label="item.name"
          :value="item.name"
        />
      </el-select>
      <el-button type="primary" @click="handleSearch">search</el-button>
    </div>

    <div
      class="mx-auto mt-20 h-[600px] overflow-y-scroll rounded-lg bg-slate-800 px-10 py-5 text-white md:w-full lg:w-4/5"
      v-if="!errorShow"
    >
      <h1 class="text-3xl" v-if="dictionary.length && !errorShow">
        {{ dictionary[0].word.toUpperCase() }}
      </h1>

      <div
        class="mb-2 last:mb-0"
        v-for="(definition, index) in dictionary"
        :key="index"
      >
        <!-- 音标读音 -->
        <div class="mb-2">
          <span
            class="mr-2 cursor-pointer rounded hover:opacity-80"
            @click="handleClick(index)"
          >
            {{ definition?.word }}
          </span>
          <i
            class="fa-solid fa-austral-sign mr-3 cursor-pointer hover:opacity-80"
          ></i>
          <i
            class="fa-brands fa-opensuse mr-3 cursor-pointer hover:opacity-80"
          ></i>
          <i
            class="fa-solid fa-volume-high mr-3 cursor-pointer hover:opacity-80"
          ></i>
          <audio :src="definition?.phonetics[0]?.audio" ref="audio"></audio>
        </div>
        <!-- 含义 -->
        <div class="meanings">
          <div
            class="meaning"
            v-for="(meaning, index) in definition.meanings"
            :key="index"
          >
            <span class="partOfSpeech bg-[#3b3e45]">{{
              meaning.partOfSpeech
            }}</span>
            <span class="word-meaning"
              >{{
                meaning.definitions
                  .map((item: definitionsObj) => item.definition)
                  .join("")
              }}
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { storeToRefs } from "pinia";
import { useUserStore } from "@/store";
import { AxiosInstance } from "axios";
import { reactive, ref, Ref, inject } from "vue";

import { useToast } from "vue-toastification";
import { useTemplateRef } from "vue";
const request: AxiosInstance = inject("$request") as AxiosInstance;

defineOptions({
  name: "Home",
});

const toast = useToast();

type resultsObj = {
  name: string;
  url: string;
};

interface pokemonData {
  count: number;
  next: string | null;
  previous: string | null;
  results: Array<resultsObj>;
}
const data: pokemonData = await request({
  url: "/api/v2/pokemon",
  method: "get",
});
console.log("data", data);
const inputValue: Ref<string> = ref("hello");
const selectValue: Ref<string> = ref("hello");
const selectOptions: Array<resultsObj> = reactive(data.results);
const dictionary: Ref<Array<dictionaryDetailsType>> = ref([]);

type meaningsObj = {
  antonyms: Array<string>;
  definitions: Array<definitionsObj>;
  partOfSpeech: string;
  synonyms: Array<string>;
};

type definitionsObj = {
  antonyms: Array<string>;
  definition: string;
  example: string;
  synonyms: Array<string>;
};

type phoneticsObj = {
  audio: string;
  license: resultsObj;
  sourceUrl: string;
};

type dictionaryDetailsType = {
  license: resultsObj;
  meanings: Array<meaningsObj>;
  phonetics: Array<phoneticsObj>;
  sourceUrls: Array<string>;
  word: string;
};

const errorShow: Ref<boolean> = ref(false);

const handleSearch = async () => {
  try {
    const data = (await request({
      url: `/entries/en/${inputValue.value}`,
      method: "GET",
    })) as Array<dictionaryDetailsType>;
    errorShow.value = false;
    console.log("handleSearch", data);
    dictionary.value = data;
  } catch (error) {
    console.log(error);

    dictionary.value = [];
    errorShow.value = true;
  }
  toast.success("success");
};
handleSearch();

const audio: Ref = useTemplateRef("audioRef");

function handleClick(index: number) {
  // console.log(audio);
  audio.value[index].currentTime = 0;
  audio.value[index].play();
}

const userStore = useUserStore();

const { userInfo } = storeToRefs(userStore);
</script>

<style>
div.meaning {
  .partOfSpeech {
    margin-right: 10px;
    background-color: #3b3e45;
    opacity: 0.8;
    display: inline-block;
    padding-block: 3px;
    padding-inline: 5px;
    font-size: 14px;
    border-radius: 5px;
    line-height: 25px;
  }
  .word-meaning {
    line-height: 25px;
  }
}
</style>
